<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>采购基本信息</span>
                <div style="float: right;">
                    <el-button size="small" @click="onClose">取 消</el-button>
                </div>
            </div>
            <table class="custom-table">
                <tr><td class="tr-title">项目名称</td><td colspan="3">{{details.name}}</td></tr>
                <tr><td class="tr-title">报名开始时间</td><td>{{details.startTime | formatTime}}</td><td class="tr-title">结束时间</td><td>{{details.endTime | formatTime}}</td></tr>
                <tr><td class="tr-title">开标时间</td><td>{{details.openTime | formatTime}}</td>
                    <td class="tr-title">已报名供应商数量</td><td>{{ purchaseSupplier == null ? details.supplierNum:'--'}}</td>
                <tr><td class="tr-title">收货人</td><td>{{details.receiverName}}</td><td class="tr-title">收货人电话</td><td>{{details.receiverPhone}}</td></tr>
                <tr><td class="tr-title">收货地址</td><td colspan="3">{{details.address}}</td></tr>
                <tr><td class="tr-title">采购原因</td><td colspan="3">{{details.reason}}</td></tr>
                <tr><td class="tr-title">附件</td><td colspan="3">
                    <el-button size="mini" type="danger" @click="fileDownload">下载</el-button>
                </td></tr>
            </table>
          </el-card>
          
          <!-- <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>附件</span>
                <div style="float: right;">
                    <el-button @click="changePdfPage(0)" type="primary" size="mini" :disabled="currentPage==1">上一页</el-button>
                    {{currentPage}} / {{pageCount}}
                    <el-button @click="changePdfPage(1)" type="primary" size="mini" :disabled="currentPage==pageCount">下一页</el-button>
                    <el-button type="primary" size="mini" @click.stop="clock(true)">顺时针旋转</el-button>
                    <el-button type="primary" size="mini" @click.stop="clock(false)">逆时针旋转</el-button>
                    <el-button size="mini" type="danger" @click="fileDownload">下载</el-button>
                </div>
            </div>
            <pdf :src="pdfUrl" :rotate="pageRotate" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler"></pdf>
          </el-card> -->

          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>采购劳务</span>
            </div>
            <el-table :data="tableData" style="width: 100%;" ref="table2" stripe>
                <el-table-column prop="name" label="劳务名称"></el-table-column>
                <el-table-column prop="purchasedNum" label="申请数量"></el-table-column>
                <el-table-column prop="remarks" label="备注" width="200">
                    <template slot-scope="scope">
                        <el-popover
                        placement="top"
                        width="200"
                        trigger="click"
                        :content="scope.row.remarks">
                        <el-button type="text" slot="reference">{{scope.row.remarks | ellipsis}}</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>采购单位</span>
            </div>
            <table class="custom-table">
                <tr><td class="tr-title">单位名称</td><td>{{dept.unitName}}</td><td class="tr-title">单位电话</td><td>{{dept.unitPhone}}</td></tr>
                <tr><td class="tr-title">电子邮件</td><td>{{dept.email}}</td><td class="tr-title">联系电话</td><td>{{dept.concatPhone}}</td></tr>
                <tr><td class="tr-title">公司地址</td><td colspan="3">{{dept.address}}</td></tr>
            </table>
          </el-card>

          <!--供应商进来是自己的详情，其他角色全部供应商列表-->
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>招标详情</span>
                <label style="float: right;">中标价：{{details.winningMoney/100}}</label>
            </div>
            <!--报名明细 -->
            <el-table :data="tableDateEnroll" style="width: 100%;" ref="table2" stripe>
                <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
                <el-table-column prop="createTime" label="报名时间" :formatter="formatDate"></el-table-column>
                <el-table-column prop="openTime" label="开标时间" :formatter="formatTime"></el-table-column>
                <el-table-column prop="supplierId" label="是否中标">
                    <template slot-scope="scope">
                        <template v-if="scope.row.supplierId === row.winningSupplierId">
                            <el-tag type="success">已中标</el-tag>
                        </template>
                        <template v-else>
                            <el-tag type="warning">未中标</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="explain" label="中标理由">
                    <template slot-scope="scope">
                        <p>
                            {{ scope.row.explain | ellipsis}}
                            <el-button type="text" @click="more(scope.row.explain)" size="mini" v-if="scope.row.explain && scope.row.explain.length > 18">更多</el-button>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="专家评分详情">
                    <template slot-scope="scope">
                        <el-button type="text" v-if="scope.row.scoreTotal !==0" size="mini" @click="toogleExpand(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-drawer
        title="评分详情"
        :visible.sync="drawer"
        :append-to-body="true"
        direction="rtl"
        size="50%">
            <table class="custom-table" style="margin-bottom:10px;">
                <tr><td class="tr-title">供应商名称</td><td>{{enrollDetails.supplierName}}</td></tr>
                <tr><td class="tr-title">报名资料</td><td><el-button type="text" @click="privew">预览</el-button></td></tr>
                <tr><td class="tr-title">报价合计</td><td>{{enrollDetails.quoteAmount}}</td></tr>
                <tr><td class="tr-title">履约能力</td><td>{{enrollDetails.score1}}</td></tr>
                <tr><td class="tr-title">价格</td><td>{{enrollDetails.score2}}</td></tr>
                <tr><td class="tr-title">资质</td><td>{{enrollDetails.score3}}</td></tr>
                <tr><td class="tr-title">总分</td><td>{{enrollDetails.scoreTotal}}</td></tr>
                <tr><td class="tr-title">评分方法</td><td>{{details.scoreExplain}}</td></tr>
            </table>
            <el-table :data="enrollDetails.enrollTableData" style="width: 100%;" stripe>
                <el-table-column prop="name" label="劳务名称"></el-table-column>
                <el-table-column prop="purchasedNum" label="采购数量"></el-table-column>
                <el-table-column prop="unitPrice" label="报价">
                    <template slot-scope="scope">
                        {{scope.row.unitPrice/100}}
                    </template>
                </el-table-column>
                <el-table-column prop="skuInfo" label="备注" width="200">
                    <template slot-scope="scope">
                        <p>
                          {{ scope.row.skuInfo | ellipsis}}
                          <el-button type="text" @click="more(scope.row.skuInfo)" size="mini" v-if="scope.row.skuInfo && scope.row.skuInfo.length > 18">更多</el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>

        <el-dialog title="查看更多" append-to-body :visible.sync="dialogVisible" width="30%">
            <div style="line-height: 22px;">{{contents}}</div>
        </el-dialog>

  
    </div>
</template>

<script>
    /*
        :rotate="pageRotate"
      :page="currentPage" // 当前展示的PDF页码
      @num-pages="pageCount=$event" // PDF文件总页码
      @page-loaded="currentPage=$event" // 一开始加载的页面
      @loaded="loadPdfHandler"> // 加载事件
    */
import moment from 'moment'
import pdf from 'vue-pdf'
import { bidPurchaseDetails,bidPurchaseInquiryInvitationEnrollDetails } from "@/api/labour_purchase_api"
export default {
    props: ['row'],
    components:{
        pdf
    },
    data() {
        return {
            pdfUrl:'',
            currentPage: 1, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            pageRotate: 0,//旋转
            tableData:[],
            tableDateEnroll:[],
            details:{},
            dept:{},
            //报名详情
            enrollDetails:{},
            drawer:false,
            //更多备注
            dialogVisible:false,
            contents:''
        };
    },
    filters: {
        formatData(value) {
            if (!value) {
                return ''
            }
            return moment(value).format("YYYY-MM-DD")
        },
        formatTime(value) {
            if (!value) {
                return ''
            }
            return moment(value).format("YYYY-MM-DD HH:mm:ss")
        },
        ellipsis (value) {
            if (!value) return ''
            if (value.length > 18) {
                return value.slice(0,18) + '...'
            }
            return value
        },
    },
    computed: {
        purchaseSupplier() {
            return this.$store.getters.permission_user.purchaseSupplier;
        }
    },
    created(){
        this.getBidDetails();//标详情
    },
    methods: {
        formatDate(row, column) {
              const date = row[column.property]
              if (date == undefined) {
              return ''
              }
              return moment(date).format("YYYY-MM-DD")
        },
        formatTime(row, column) {
            const date = row[column.property]
            if (date == undefined) {
            return ''
            }
            return moment(date).format("YYYY-MM-DD HH:mm:ss")
        },
        async getBidDetails(){
            const {code,data} = await bidPurchaseDetails(this.row.id);
            if(code === 200){
                this.details = data;
                this.dept = data.dept;//采购单位
                this.getPdf();
                this.tableData = data.purchaseGoodsDetail !== '' ? JSON.parse(data.purchaseGoodsDetail) : [];//物资列表
                this.getEnrollDetails();//详情加载完以后 加载报名详情
            }
        },
        async getEnrollDetails(){
            const {code,data} = await bidPurchaseInquiryInvitationEnrollDetails(this.row.id);
            if(code === 200){
                const supplier = this.$store.getters.permission_user.purchaseSupplier;
                //设置开标时间
                data.forEach(v=>{
                    v.openTime = this.row.openTime;
                    v.quoteAmount = (v.quoteAmount/100);
                    v.score1 = (v.score1/100);
                    v.score2 = (v.score2/100);
                    v.score3 = (v.score3/100);
                    v.scoreTotal = (v.scoreTotal/100);
                    v.enrollTableData = v.quoteDetail !== '' ? JSON.parse(v.quoteDetail) : [];//报价列表
                })
                if(supplier !== null){
                    this.tableDateEnroll = data.filter(v=> v.supplierId===supplier.id);
                }else{
                    data.forEach(v=>{//中标理由
                        if(v.supplierId === this.row.winningSupplierId){
                            v.explain = this.details.explain;
                        }
                    })
                    this.tableDateEnroll = data;
                }
            }
        },
        toogleExpand(row) {
            this.enrollDetails = row;
            this.drawer = true;
        },
        privew(){
            if(!this.enrollDetails.qualification){return this.$message.error('没有可下载的文件');}
            var form = document.createElement('form');
            form.action = `${process.env.VUE_APP_FILE}${this.enrollDetails.qualification}`;
            form.target = '_blank';
            form.method = 'get';
            document.body.appendChild(form);
            form.submit();
        },
        //更多备注
        more(content){
            this.contents = content;
            this.dialogVisible = true;
        },
        // pdf加载时
        loadPdfHandler(e) {
            this.currentPage = 1 // 加载的时候先加载第一页
            this.pageRotate = 0
        },
        getPdf(){
            const pdfUrl = `${process.env.VUE_APP_FILE}${this.details.files}`
            this.pdfUrl = pdf.createLoadingTask(pdfUrl);
        },
        changePdfPage (val) {
            if (val === 0) {
                this.currentPage--
            }else{
                this.currentPage++
            }
        },
        clock(flag) {
            if(flag){
                this.pageRotate += 90
            }else{
                this.pageRotate -= 90
            }
        },
        fileDownload(){
            const pdfUrl = this.details.files;
            if(!pdfUrl){return this.$message.error('没有可下载的文件');}
            var form = document.createElement('form');
            form.action = `${process.env.VUE_APP_FILE}${this.details.files}`;
            form.target = '_blank';
            form.method = 'get';
            document.body.appendChild(form);
            form.submit();
        },
        onClose() {
            this.$emit("on-cancel-click","details");
        }
    }
};
</script>
    
    